﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello MUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="../../css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../../css/app.css" />
    <link href="../../css/gyy.css" rel="stylesheet" />

    <style>
        .title {
            margin: 20px 15px 10px;
            color: #6d6d72;
            font-size: 15px;
        }

        .mui-table-view {
            margin-top: 20px;
        }
    </style>

</head>
<body>
    <div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
        <!--侧滑菜单部分-->
        <aside id="offCanvasSide" class="mui-off-canvas-left">
            <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <div class="title">
                        <img src="../../images/logo.png" width="90">
                    </div>
                    <ul class="mui-table-view mui-table-view-inverted mui-hidden" id="login_ul">
                        <li class="mui-table-view-cell">
                            <a class="mui-navigate-right" type="login" href="html/barcode_scan.html">
                                登录
                            </a>
                        </li>
                    </ul>
                    <p class="menu-name">话题</p>
                    <ul class="mui-table-view mui-table-view-inverted" id="ul_topics">
                        <li class="mui-table-view-cell">
                            <a class="mui-navigate-right" type="topic" href="html/list.html" tab="all">
                                最新
                            </a>
                        </li>
                        <li class="mui-table-view-cell">
                            <a class="mui-navigate-right" type="topic" href="html/list.html" tab="good">
                                精华
                            </a>
                        </li>
                    </ul>

                </div>
            </div>
        </aside>
        <!--主界面部分-->
        <div class="mui-inner-wrap" style="background-color:#efeff4">
            <header class="mui-bar mui-bar-nav">
                <a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
                <h1 class="mui-title">个人中心</h1>
            </header>

            <div class="mui-content">
                <div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="padding-top:44px;padding-bottom:50px;">
                    <div class="mui-scroll">

                        <div>
                            <div class="row adc">
                                <div class="pdiv">

                                    <img class="" style="width:80px;" src="../../images/a2.png" />
                                </div>
                                <div class="mui-col-xs-12 doc-indro">
                                    <div><span class="doc-post">富小梅 </span><span class="doc-ks">骨科</span><span class="doc-ks">副主任医师</span></div>
                                    <p class="doc-hospital">成都中医药大学附属医院</p>

                                </div>
                            </div>
                            <div style="clear: both;"></div>
                        </div>
                        <!--页面主内容区开始-->
                        <ul class="mui-table-view">
                            <!--<li class="mui-table-view-cell mui-media">
                                <a class='mui-navigate-right' href="javascript:;">
                                    <img class="mui-media-object mui-pull-left" src="../../images/yuantiao.jpg">
                                    <div class="mui-media-body">
                                        远眺
                                        <p class='mui-ellipsis'>静静的看这个世界，最后终于疯了</p>
                                    </div>
                                </a>
                            </li>-->
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">
                                    我的说说
                                </a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">
                                    我的问答
                                </a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">
                                    我的结伴
                                </a>
                            </li>
                        </ul>
                        <ul class="mui-table-view mui-table-listtop">
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">
                                    历史参加记录
                                </a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">
                                    修改个人资料
                                </a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">
                                    修改留学城市
                                </a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">
                                    切换账号
                                </a>
                            </li>
                        </ul>
                        <ul class="mui-table-view mui-table-listtop">
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">
                                    家长
                                </a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">
                                    服务商
                                </a>
                            </li>

                        </ul>

                        <!--页面主内容区结束-->


                    </div>
                </div>


            </div>

            <div class="mui-off-canvas-backdrop"></div>
            <div id="nav" class="mui-bar mui-bar-tab ">
                <div id="tb-0" class="mui-tab-item ">
                    <span class="mui-icon mui-icon-email hy-icon"></span>
                    <span class="mui-tab-label">最近使用</span>
                </div>
                <div id="tb-1" class="mui-tab-item " href="#tabbar-with-chat">
                    <span class="mui-icon mui-icon-home hy-icon">
                        <span class="mui-badge">9</span>
                    </span>
                    <span class="mui-tab-label">留学圈</span>
                </div>
                <div id="tb-2" class="mui-tab-item" href="#tabbar-with-contact">
                    <span class="mui-icon mui-icon-contact hy-icon"></span>
                    <span class="mui-tab-label">留学生活</span>
                </div>
                <div id="tb-3" class="mui-tab-item mui-active" href="#tabbar-with-map">
                    <span class="mui-icon mui-icon-gear hy-icon"></span>
                    <span class="mui-tab-label">个人中心</span>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="../../js/mui.min.js"></script>

<script src="../../bower_components/jquery/dist/jquery.min.js"></script>
<script>

    var tb0 = document.getElementById("tb-0");
    var tb1 = document.getElementById("tb-1");
    var tb2 = document.getElementById("tb-2");
    var tb3 = document.getElementById("tb-3");
    //监听点击事件
    tb0.addEventListener("tap", function () {
        location.href = '../chat/_chat.html';
    });
    tb1.addEventListener("tap", function () {
        location.href = '../link/_link.html';
    });
    tb2.addEventListener("tap", function () {
        location.href = '../oversea/_oversea.html';
    });
    tb3.addEventListener("tap", function () {
        location.href = '../person/_person.html';
    });

</script>
<script>
    mui.init();
    //侧滑容器父节点
    var offCanvasWrapper = mui('#offCanvasWrapper');
    //主界面容器
    var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
    //菜单容器
    var offCanvasSide = document.getElementById("offCanvasSide");

    //移动效果是否为整体移动
    var moveTogether = false;
    //侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
    var classList = offCanvasWrapper[0].classList;
    //变换侧滑动画移动效果；
    classList.add('mui-scalable');


    //主界面和侧滑菜单界面均支持区域滚动；
    mui('#offCanvasSideScroll').scroll();
    mui('#offCanvasContentScroll').scroll();


    //实现ios平台原生侧滑关闭页面；
    if (mui.os.plus && mui.os.ios) {
        mui.plusReady(function () { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能
            plus.webview.currentWebview().setStyle({
                'popGesture': 'none'
            });
        });
    }
    (function ($) {
        //阻尼系数
        var deceleration = mui.os.ios ? 0.003 : 0.0009;
        $('.mui-scroll-wrapper').scroll({
            bounce: false,
            indicators: true, //是否显示滚动条
            deceleration: deceleration
        });
        $.ready(function () {

            //循环初始化所有下拉刷新，上拉加载。
            $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function (index, pullRefreshEl) {
                $(pullRefreshEl).pullToRefresh({
                    down: {
                        callback: function () {
                            var self = this;
                            setTimeout(function () {
                                var ul = self.element.querySelector('.mui-table-view');
                                ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);
                                self.endPullDownToRefresh();
                            }, 1000);
                        }
                    },
                    up: {
                        callback: function () {
                            var self = this;
                            setTimeout(function () {
                                var ul = self.element.querySelector('.mui-table-view');
                                ul.appendChild(createFragment(ul, index, 5));
                                self.endPullUpToRefresh();
                            }, 1000);
                        }
                    }
                });
            });
            var createFragment = function (ul, index, count, reverse) {
                var length = ul.querySelectorAll('li').length;
                var fragment = document.createDocumentFragment();
                var li;
                for (var i = 0; i < count; i++) {
                    li = document.createElement('li');
                    li.className = 'mui-table-view-cell';
                    li.innerHTML = '第' + (index + 1) + '个选项卡子项-' + (length + (reverse ? (count - i) : (i + 1)));
                    fragment.appendChild(li);
                }
                return fragment;
            };
        });
    })(mui);




</script>
</html>